<template>
  <div class="goodesmodelbox">
    <el-dialog
      :showClose="false"
      title="活动商品"
      :visible.sync="centerDialogVisible"
      height="100%"
      top
      width="100%"
      :fullscreen="true"
    >
      <div class="topSearch">
        <div class="topSearchLeft">
          <div>
            <p>商品名称:</p>
            <el-input
              v-model="goodsName"
              :style="{ width: '260px', marginLeft: '20px' }"
              placeholder="商品名称"
              clearable
              @clear="clearHandle"
            ></el-input>
          </div>
          <div>
            <p>商品状态:</p>
            <el-select
              v-model="status"
              :style="{ width: '160px', marginLeft: '20px' }"
              clearable
              filterable
              placeholder="商品状态"
              @clear="ClearCategory"
            >
              <el-option
                v-for="(item, i) in goodsStatusList"
                :key="i"
                :label="item.name"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="topSearchRight">
          <el-button
            :style="{ marginLeft: '20px' }"
            type="primary"
            @click="handleSearch"
          >
            查询
          </el-button>
          <el-button :style="{ marginLeft: '20px' }" @click="chongzhi">
            重置
          </el-button>
        </div>
        <!-- <el-input
          v-model="goodsName"
          :style="{ width: '260px', marginLeft: '20px' }"
          placeholder="商品名称"
          clearable
          @clear="clearHandle"
        ></el-input>
        <el-select
          v-model="status"
          :style="{ width: '160px', marginLeft: '20px' }"
          clearable
          filterable
          placeholder="商品状态"
          @clear="ClearCategory"
        >
          <el-option
            v-for="(item, i) in goodsStatusList"
            :key="i"
            :label="item.name"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button
          :style="{ marginLeft: '20px' }"
          circle
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>-->
      </div>
      <div class="topButton">
        <div class="topButtonLeft">
          <el-button @click="cancelgoodesmodel">取 消</el-button>
        </div>
        <div class="topButtonRight">
          <el-button circle icon="el-icon-refresh-right" @click="RefreshHandle">
          </el-button>
        </div>
        <!-- <el-button class="shuxin" round size="mini" @click="RefreshHandle"
          >刷新
        </el-button> -->
      </div>
      <el-table
        v-loading="loading"
        :cell-style="{ 'text-align': 'center' }"
        :data="goodsList"
        :header-cell-style="{ 'text-align': 'center' }"
        border
        style="width: 100%"
      >
        <el-table-column fixed label="排序" prop="sort" width="70">
          <template slot-scope="scope">
            <div class="flex-container">
              <span class="flex-item">
                <!-- 序号 -->
                {{ scope.$index + 1 }}
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="goodsName"> </el-table-column>
        <el-table-column label="店铺名称" prop="mallName"> </el-table-column>
        <el-table-column
          label="活动库存"
          prop="activityStock"
          v-if="this.enterType === 7"
        >
        </el-table-column>
        <el-table-column label="单价/元" prop="price">
          <template slot-scope="scope">
            {{ scope.row.price / 100 }}
          </template>
        </el-table-column>
        <el-table-column
          label="活动价格/元"
          prop="activityPrice"
          v-if="this.enterType === 7"
        >
          <template slot-scope="scope">
            {{ scope.row.activityPrice / 100 }}
          </template>
        </el-table-column>
        <el-table-column
          label="规格"
          prop="levelPath"
          v-if="this.enterType === 7"
        >
        </el-table-column>

        <el-table-column label="状态" prop="status">
          <template slot-scope="scope">
            {{ getStatusText(scope.row.status) }}
          </template>
        </el-table-column>
        <!-- <el-table-column fixed="right" label="操作" width="400">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              @click="goodsDetailHandle(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <div class="paging">
        <el-pagination
          background
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 40]"
          layout="sizes,total, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="cancelgoodesmodel">取 消</el-button> -->
      </span>
    </el-dialog>
    <!-- <GoodsDeatils
      v-if="centerDialogVisible2"
      :centerDialogVisible="centerDialogVisible2"
      :currentRow="currentRow2"
      :enterType="enterType"
      @cancelgoodesmodel="cancelgoodesmodel2"
    /> -->
  </div>
</template>

<script>
import {
  StatisticInfo,
  ActiveGoods,
  FlashActiveGoods,
} from "@/api/mallApi/managementend/marketing";
import GoodsDeatils from "@/views/mall/managementend/marketing/components/Details.vue";

export default {
  name: "ActiveGoods",
  components: {
    GoodsDeatils,
  },
  props: {
    centerDialogVisible: Boolean,
    currentRow: Object,
    enterType: Number,
    cancelSubmit: Number,
  },
  data() {
    return {
      currentRow2: {},
      status: null,
      goodsName: "",
      loading: false,
      goodsList: [],
      currentPage: 1, // 分页
      total: 0,
      pageSize: 10,
      centerDialogVisible2: false,
      enterType2: 0,
      mallName: "",
      goodsStatusList: [
        { name: "待审核", value: 1 },
        { name: "通过", value: 2 },
        { name: "拒绝", value: 3 },
      ],
    };
  },
  methods: {
    chongzhi() {
      this.status = null;
      this.goodsName = null;
      this.RefreshHandle();
      // console.log(123);
    },
    ClearCategory() {
      this.RefreshHandle();
    }, // 清空 商品分类
    getStatusText(Status) {
      switch (Status) {
        case "1":
          return "待审核";
        case "2":
          return "通过";
        case "3":
          return "拒绝";
        default:
          return "未知";
      }
    },
    goodsDetailHandle(row) {
      this.currentRow2 = row;
      this.centerDialogVisible2 = true; // 打开弹窗
    },
    cancelgoodesmodel2() {
      this.enterType2 = 0;
      this.currentRow2 = {};
      this.centerDialogVisible2 = false;
    },
    clearHandle() {
      this.getGoodsListHandle();
    },
    RefreshHandle() {
      this.getGoodsListHandle();
    },
    handleSearch() {
      this.currentPage = 1;
      this.getGoodsListHandle();
    },
    saveActiveHandle() {},
    cancelgoodesmodel() {
      this.$emit("cancelgoodesmodel", false);
    }, // 取消按钮 传值
    getGoodsListHandle() {
      this.loading = true;
      const params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        activeId: this.currentRow.id,
        goodsName: this.goodsName,
        // mallName: this.mallName,
        status: this.status,
      };
      if (this.enterType === 7) {
        FlashActiveGoods(params)
          .then((res) => {
            if (res.code !== "00000") return;
            this.goodsList = res.data.rows;
            this.total = parseInt(res.data.totalRows);
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
          });
      } else {
        ActiveGoods(params)
          .then((res) => {
            if (res.code !== "00000") return;
            this.goodsList = res.data.rows;
            this.total = parseInt(res.data.totalRows);
            this.loading = false;
          })
          .catch((error) => {
            this.loading = false;
          });
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getGoodsListHandle();
    },
    handleCurrentChange(val) {
      // 分页
      this.currentPage = val;
      this.getGoodsListHandle();
    },
  },
  mounted() {},
  created() {
    this.getGoodsListHandle();
    console.log(this.enterType);
  },
  watch: {
    centerDialogVisible(newVal) {
      // 监听 centerDialogVisible 的变化
      if (!newVal) {
        // 当 centerDialogVisible 变为 false 时触发事件
        this.$emit("close-dialog");
      }
    },
  },
};
</script>

<style lang="scss">
.goodesmodelbox {
  .topButton {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    // > div:nth-child(1) {
    //   width: 1200px;
    //   font-size: 16px;
    //   margin-left: 20px;
    //   margin-bottom: 10px;
    //   margin-top: 10px;
    //   background-color: #ecf5ff;
    //   border-color: #d9ecff;
    //   display: inline-block;
    //   height: 32px;
    //   padding: 0 10px;
    //   line-height: 30px;
    //   color: #409eff;
    //   border-width: 1px;
    //   border-style: solid;
    //   border-radius: 4px;
    //   box-sizing: border-box;
    //   white-space: nowrap;
    //   letter-spacing: 10px;
    // }
    .shuxin {
      position: absolute;
      right: 20px;
    }
  }
  .paging {
    width: 99%;
    height: 50px;
    // background-color: antiquewhite;
    display: flex;
    align-items: end;
    justify-content: end;
  }
}
</style>
